{% extends 'base_backend.html' %}
{% load static %}
{% block title %}智慧众包—运营报告{% endblock title %}
{% block section_content %}
<div class="row" id="nav-app">
    <div class="col-lg-4 col-xs-4">
        <div class="small-box bg-red">
            <div class="inner">
                <p>整体平均价</p>
                <h3 id="acceptTask">{{ disburse_avg }}</h3>
            </div>
            <div class="icon">
                <!--<i class="glyphicon glyphicon-star-empty"></i>-->
                <i class="fa fa-bell"></i>
            </div>
            <a href="#" class="small-box-footer">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-xs-4">
        <div class="small-box bg-aqua">
            <div class="inner">
                <p>结算总量</p>
                <h3 id="myTask">{{ task_count }}</h3>
            </div>
            <div class="icon">
                <i class="fa fa-sitemap"></i>
            </div>
            <a href="#" class="small-box-footer">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-xs-4">
        <div class="small-box bg-green">
            <div class="inner">
                <p>支出总价</p>
                <h3 id="myConfig">{{ disburse_count }}<sup style="font-size: 20px"></sup></h3>
            </div>
            <div class="icon">
                <i class="fa fa-list"></i>
            </div>
            <a href="#" class="small-box-footer">
                详情&nbsp;
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
</div>
<div class="row">
    <section class="col-md-12 connectedSortable">
        <!--运营报告图-->
        <div class="box box-primary">
            <div class="box-header with-border">
                <div class="form-group form-group-sm" style="margin: 0 10px 0 0; float: left;">
                    <select class="form-control" id="changeAll">
                        <option value="3">最近3个月</option>
                        <option value="6" selected>最近6个月</option>
                        <option value="12">最近1年</option>
                    </select>
                </div>
                <h3 class="box-title" style="line-height: 30px;">任务统计</h3>
                <div class="box-tools pull-left">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div id="taskCountsIncreasingMonthly" style="width:100%;height:280px;"></div>
            </div>
        </div>
    </section>
    <section class="col-md-12 connectedSortable">
        <!--运营报告图-->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title" style="line-height: 30px;">均价统计</h3>
                <div class="box-tools pull-left">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div id="TaskAvgPricesMonthly" style="width:100%;height:280px;"></div>
            </div>
        </div>
    </section>
<!--    <section class="col-md-12 connectedSortable">-->
<!--        &lt;!&ndash;运营报告图&ndash;&gt;-->
<!--        <div class="box box-primary">-->
<!--            <div class="box-header with-border">-->
<!--                <h3 class="box-title" style="line-height: 30px;">进度统计</h3>-->
<!--                <div class="box-tools pull-left">-->
<!--                    <button type="button" class="btn btn-box-tool" data-widget="collapse">-->
<!--                        <i class="fa fa-minus"></i>-->
<!--                    </button>-->
<!--                    <button type="button" class="btn btn-box-tool" data-widget="remove">-->
<!--                        <i class="fa fa-times"></i>-->
<!--                    </button>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="box-body">-->
<!--                <div id="TaskScheduleMonthly" style="width:100%;height:280px;"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->
</div>

    {% endblock section_content %}

    {% block jquery_js %}
    <!-- jquery-ui -->
    <script type="text/javascript" src="{% static 'plugins/jQueryUI/jquery-ui.min.js' %}"></script>
    <!-- page script -->
    <script type="text/javascript" src="{% static 'plugins/echarts/extension/dataTool.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/echarts/echarts-all-3.js' %}"></script>
    <script src="{% static 'plugins/echarts/map/china.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/dark.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/infographic.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/macarons.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/roma.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/shine.js' %}"></script>
    <script src="{% static 'zhongbao/js/theme/vintage.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongbao/js/csrf.js' %}"></script>
    <script type="text/javascript" src="{% static 'zhongbao/js/util.js' %}"></script>
    <!--    <script type="text/javascript" src="{% static 'zhongbao/task/js/homeAdmin.js' %}"></script>-->

    <script type="text/javascript">
        function changeColor(id, color) {
            $(id).parent().parent().addClass("active");
            $(id).children().css("color", color);
        }

        changeColor("#operation_report", "#00FF7F");
        $('#nav_statistics').addClass("active");

        $("#changeAll").change(function () {
            drawTaskCountsIncreasingMonthly('shine', $(this).val());
        });

        // 任务统计 echarts
        function drawTaskCountsIncreasingMonthly(THEME, type) {
            var obj = document.getElementById('taskCountsIncreasingMonthly');
            var myChart = echarts.init(obj, THEME);
            myChart.showLoading();

            var avgObj = document.getElementById('TaskAvgPricesMonthly');
            var avgChart = echarts.init(avgObj, THEME);
            avgChart.showLoading();

            // var scheduleObj = document.getElementById('TaskScheduleMonthly');
            // var scheduleChart = echarts.init(scheduleObj, THEME);
            // scheduleChart.showLoading();

            $.ajax({
                url: '{% url "task:operation_report_api" %}',
                data: {
                    type: type
                },
                type: 'get',
                contentType: "application/json; charset=UTF-8",
                error: function (xhr, err) {
                    console.log('taskCountsIncreasingMonthlyApi', '运营报告图', err);
                },
                success: function (data, textStatus) {
                    var option = {
                        color: ['#3C8DBC'],
                        title: {
                            text: '运营报告图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: true},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['录入数量', '提交数量', '合格数量(代理)', '通过数量(待结算数量)', '结算数量(上月)', '应结算金额(本月)', '已支出金额(上月)']
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                start: 1,
                                end: 100
                            },
                            {
                                type: 'inside',
                                start: 1,
                                end: 100
                            }
                        ],
                        xAxis: {
                            data: data['names'],
                            axisLabel: {
                                interval: data['interval'],
                            }
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量',
                                axisLabel: {
                                    formatter: '{value}个'
                                }
                            },
                            {
                                type: 'value',
                                name: '金额',
                                axisLabel: {
                                    formatter: '{value}元'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '录入数量',
                                type: 'bar',
                                data: data['put_count_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '提交数量',
                                type: 'bar',
                                data: data['submit_count_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '合格数量(代理)',
                                type: 'bar',
                                data: data['finish_count_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '通过数量(待结算数量)',
                                type: 'bar',
                                data: data['pass_count_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '结算数量(上月)',
                                type: 'bar',
                                data: data['disburse_count_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '应结算金额(本月)',
                                barWidth: 20,
                                yAxisIndex: 1,
                                type: 'bar',
                                data: data['pass_reward_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '已支出金额(上月)',
                                barWidth: 20,
                                yAxisIndex: 1,
                                type: 'bar',
                                data: data['disburse_reward_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                        ]
                    };
                    myChart.setOption(option);
                    myChart.hideLoading();

                    var avgOption = {
                        color: ['#3C8DBC'],
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: true},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        legend: {
                            data: ['支出金额/结算数量', '支出金额/应结算数量', '应结算金额/应结算数量']
                        },
                        dataZoom: [
                            {
                                type: 'slider',
                                start: 1,
                                end: 100
                            },
                            {
                                type: 'inside',
                                start: 1,
                                end: 100
                            }
                        ],
                        xAxis: {
                            data: data['names'],
                            axisLabel: {
                                interval: data['interval'],
                            }
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '金额',
                                axisLabel: {
                                    formatter: '{value}元'
                                }
                            },
                        ],
                        series: [
                            {
                                name: '支出金额/结算数量',
                                type: 'bar',
                                data: data['disburse_avg_price_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '支出金额/应结算数量',
                                type: 'bar',
                                data: data['disburse_pass_avg_price_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                name: '应结算金额/应结算数量',
                                type: 'bar',
                                data: data['pass_avg_price_list'],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            rotate: 70,
                                            position: 'top',
                                            distance: 10,
                                            verticalAlign: 'middle',
                                            textStyle: {
                                                color: 'black',
                                                fontSize: 12
                                            }
                                        }
                                    }
                                }
                            },
                        ]
                    };
                    avgChart.setOption(avgOption);
                    avgChart.hideLoading();

                    // var scheduleOption = {
                    //     color: ['#3C8DBC'],
                    //     title: {
                    //         text: ''
                    //     },
                    //     tooltip: {
                    //         trigger: 'axis'
                    //     },
                    //     toolbox: {
                    //         feature: {
                    //             dataView: {show: true, readOnly: true},
                    //             magicType: {show: true, type: ['line', 'bar']},
                    //             restore: {show: true},
                    //             saveAsImage: {show: true}
                    //         }
                    //     },
                    //     legend: {
                    //         data: ['待审核数量(代理)', '待通过数量(管理员)']
                    //     },
                    //     dataZoom: [
                    //         {
                    //             type: 'slider',
                    //             start: 1,
                    //             end: 100
                    //         },
                    //         {
                    //             type: 'inside',
                    //             start: 1,
                    //             end: 100
                    //         }
                    //     ],
                    //     xAxis: {
                    //         data: data['names'],
                    //         axisLabel: {
                    //             interval: data['interval'],
                    //         }
                    //     },
                    //     yAxis: [
                    //         {
                    //             type: 'value',
                    //             name: '数量',
                    //             axisLabel: {
                    //                 formatter: '{value}个'
                    //             }
                    //         },
                    //     ],
                    //     series: [
                    //         {
                    //             name: '待审核数量(代理)',
                    //             type: 'bar',
                    //             data: data['wait_audit_count_list'],
                    //             itemStyle: {
                    //                 normal: {
                    //                     label: {
                    //                         show: true,
                    //                         rotate: 70,
                    //                         position: 'top',
                    //                         distance: 10,
                    //                         verticalAlign: 'middle',
                    //                         textStyle: {
                    //                             color: 'black',
                    //                             fontSize: 12
                    //                         }
                    //                     }
                    //                 }
                    //             }
                    //         },
                    //         {
                    //             name: '待通过数量(管理员)',
                    //             type: 'bar',
                    //             data: data['wait_pass_count_list'],
                    //             itemStyle: {
                    //                 normal: {
                    //                     label: {
                    //                         show: true,
                    //                         rotate: 70,
                    //                         position: 'top',
                    //                         distance: 10,
                    //                         verticalAlign: 'middle',
                    //                         textStyle: {
                    //                             color: 'black',
                    //                             fontSize: 12
                    //                         }
                    //                     }
                    //                 }
                    //             }
                    //         },
                    //     ]
                    // };
                    // scheduleChart.setOption(scheduleOption);
                    // scheduleChart.hideLoading();
                }
            });
        }
        drawTaskCountsIncreasingMonthly('shine', 6);

    </script>
    {% endblock jquery_js %}